iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
0
Modern Web

JS煉金術:Javascript30+聲光玩轉的Drum Pads系列 第 15

[ JS30]DAY14 : JavaScript References VS Copying

  • 分享至 

  • xImage
  •  

[程式碼&DEMO] [HackMD完整筆記]

目標


JavaScript中陣列與物件的引用(refrence)及複製(Copying)。

步驟流程


1.原始型別
JavaScript中的原始型別(Primitive Type):
(1)String (2)Number (3)Boolean (4)Null (5)Undefine

let age = 100;
let age2 = age;
console.log(age, age2); // 100 100
age = 200;
console.log(age, age2); // 200 100

先宣告一個 Number 型的變數 age,並將此變數賦值給另一個變數 age2,這時兩個變數的值都是100。然後賦給age新的值,但age的改變並不影響age2。

2.陣列

const rappers = ['Brown', 'kidmilli', 'Nafla', 'YoungB'];
const team = rappers;
console.log(rappers, team);

如果需要修改team中的值用:

team[3] = 'Bewhy';

會變成:

console.log(rappers, team); 
// ['Brown', 'kidmilli', 'Nafla', 'Bewhy'] 
['Brown', 'kidmilli', 'Nafla', 'Bewhy']

原陣列 rappers 也被修改了。因為 team 只是這個陣列的引用,並不是它的複製。
team 和 rappers 都指向的是同一個陣列。

解決:

  • 方法一: Array.prototype.slice()

slice( )方法得到的結果是對原陣列進行淺拷貝,故原陣列不會被修改。因此如果修改兩個陣列中其中之一,另一個都不受到影響。

const team2 = rappers.slice();
team2[3] = 'Bewhy2';
console.log(rappers, team2); 
  • 方法二: Array.prototype.concat()

concat( )方法是用來合併陣列的,它不會更改原有的陣列,而是返回一個新陣列,所以可以將 rappers 陣列與一個空陣列合併,即可得到此結果。

const team3 = [].concat(rappers);
team3[3] = 'Bewhy3';
console.log(rappers, team3); 
  • 方法三: ES6 擴展语法
const team4 = [...rappers];
team4[3] = 'Bewhy4';
console.log(rappers, team4);
  • 方法四: Array.from()
const team5 = Array.from(rappers);
team5[3] = 'Bewhy5';
console.log(rappers, team5);

3.Object物件

const person = {
   name: 'Brown',
   age: 23
 };
  • 方法一: Object.assign()
    使用 Object.assign(target, ...sources) 時,後來的源對象的屬性值,將會覆蓋它之前的對象的屬性。所以可以先複製 person 之後,再賦給屬性新的值。
const cap2 = Object.assign({}, person, { number: 88, age: 12 });
console.log(cap2); // Object {name: "Brown", age: 12, number: 88}
  • 方法二 :JSON 轉換
    利用 JSON 可以先將對象轉成字串的格式,然後再把它轉成 JSON,從而實現複製。
const Brown = {
  name: 'Brown',
  age: 100,
  social: {
    twitter: '@Brown',
    facebook: 'Brown.developer'
  }
};

const dev = Object.assign({}, Brown);
const dev2 = JSON.parse(JSON.stringify(Brown));
console.log(Brown);
console.log(dev);
console.log(dev2);

上一篇
[JS30]DAY13 : Slide in on Scroll
下一篇
[JS30]DAY15 : LocalStorage and Event Delegation
系列文
JS煉金術:Javascript30+聲光玩轉的Drum Pads30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言